<!-- 重置密码流程弹窗线框原型（新文件） -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>重置密码流程 - 线框图原型V2</title>
  <style>
    body { margin: 0; padding: 0; background: #f6f7fb; font-family: Arial, sans-serif; }
    .center-box { width: 360px; margin: 60px auto; background: linear-gradient(180deg,#ff7e5f 0%,#feb47b 100%); border-radius: 24px; box-shadow: 0 6px 32px rgba(255,126,95,0.12); padding: 36px 28px 28px 28px; display: flex; flex-direction: column; align-items: center; }
    .steps { display: flex; justify-content: center; gap: 18px; margin-bottom: 18px; }
    .step { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #ff7e5f; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem; border: 2px solid #ffb47b; }
    .step.active { background: #3ecf8e; color: #fff; border: 2px solid #3ecf8e; }
    .step-labels { display: flex; justify-content: center; gap: 32px; font-size: 0.98rem; color: #fff; margin-bottom: 12px; }
    .title { font-size: 1.3rem; font-weight: bold; color: #fff; margin-bottom: 6px; text-align: center; }
    .subtitle { color: #fff; font-size: 1rem; margin-bottom: 18px; text-align: center; }
    .success-box { background: #e6fff2; color: #1abc9c; border-radius: 8px; padding: 10px 0; width: 100%; text-align: center; margin-bottom: 18px; font-size: 1rem; }
    .form { width: 100%; display: flex; flex-direction: column; gap: 14px; }
    .form-label { color: #fff; font-size: 0.98rem; margin-bottom: 2px; }
    .form-input { width: 100%; padding: 8px 12px; border: 1px solid #eee; border-radius: 6px; font-size: 1rem; }
    .form-group { display: flex; flex-direction: column; gap: 2px; }
    .password-req { background: #fff; color: #ff7e5f; border-radius: 8px; padding: 10px 14px; font-size: 0.98rem; margin-bottom: 10px; }
    .password-req ul { margin: 0; padding-left: 18px; }
    .btn-row { display: flex; gap: 16px; margin-top: 10px; }
    .btn { flex: 1; background: #fff; color: #ff7e5f; border: 1.5px solid #fff; border-radius: 8px; padding: 10px 0; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background 0.2s, color 0.2s; }
    .btn.primary { background: #ff7e5f; color: #fff; border: 1.5px solid #fff; }
    .btn:hover { opacity: 0.92; }
  </style>
</head>
<body>
  <div class="center-box">
    <div class="steps">
      <div class="step active">1</div>
      <div class="step">2</div>
      <div class="step">3</div>
    </div>
    <div class="step-labels">
      <span>验证身份</span>
      <span>重置密码</span>
      <span>完成</span>
    </div>
    <div class="title">重置密码</div>
    <div class="subtitle">请设置您的新密码</div>
    <div class="success-box">身份验证成功！请设置新密码</div>
    <form class="form">
      <div class="form-group">
        <label class="form-label">新密码*</label>
        <input class="form-input" type="password" placeholder="请输入新密码（6-20位）">
      </div>
      <div class="form-group">
        <label class="form-label">确认密码*</label>
        <input class="form-input" type="password" placeholder="请再次输入新密码">
      </div>
      <div class="password-req">
        密码要求：
        <ul>
          <li>长度6-20位</li>
          <li>包含字母</li>
          <li>包含数字</li>
        </ul>
      </div>
      <div class="btn-row">
        <button class="btn primary" type="button">重置密码</button>
        <button class="btn" type="button">返回上一步</button>
      </div>
    </form>
  </div>
</body>
</html>
